import 'dart:math';

import 'package:flutter/material.dart';

import 'card.dart';
import 'main.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {

    scrW = MediaQuery.of(context).size.width;
    scrH = MediaQuery.of(context).size.height;


    return Scaffold(
      appBar: AppBar(
        // toolbarHeight: 10,
        backgroundColor: Color(0xFFFAFAFB),
        leadingWidth: scrW * 0.17,
        leading: Container(
          margin: EdgeInsets.only(
            left: scrW * 0.1,
          ),
          child: InkWell(
            onTap: () {
              Scaffold.of(context).openDrawer();
            },
            child: Image.asset(
              'images/home/Home.png',
              width: scrW* 0.1,
            ),
          ),
        ),
        actions: [
          Padding(
            padding: EdgeInsets.only(
              right: scrW * 0.1,
            ),
            child: Image.asset(
              'images/home/Group 19993.png',
              width: scrW * 0.1,
            ),
          )
        ],
      ),
      body: Container(
        color: Color(0xFFFAFAFB),
        // padding: EdgeInsets.symmetric(horizontal: 30),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30),
              child: StackCards(const Color(0xFF333232),false,scrH * 0.265),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 30),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.topLeft,
                    padding: EdgeInsets.symmetric(vertical: scrH * 0.02),
                    child: Text(
                      'Frequently Used',
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),
                    ),
                  ),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: [
                        UsedItem(
                            color: Color(0xffedfbf6),
                            title: 'Mobile',
                            img: 'images/home/Icons _ Phone _ Filled.png',
                            subtitle: 'Recharge'),
                        UsedItem(
                            color: Color(0xfffff1f1),
                            title: 'Bill',
                            img: 'images/home/Vector.png',
                            subtitle: 'Payments'),
                        UsedItem(
                            color: Color(0xfffff9ed),
                            title: 'Bank',
                            img: 'images/home/Shape.png',
                            subtitle: 'Tranfer'),
                        UsedItem(
                            color: Color(0xffeceefb),
                            title: 'Request',
                            img:
                            'images/home/Payments, Finance_Coins, Money, Plus, Add.png',
                            subtitle: 'Money'),
                        UsedItem(
                            color: Color(0xfffbecfa),
                            title: 'Tranfer',
                            img: 'images/home/Icons _ Phone _ Filled.png',
                            subtitle: 'Recharge'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 30),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.topLeft,
                    padding: EdgeInsets.symmetric(vertical: scrH * 0.02),
                    child: Text(
                      'Service',
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),
                    ),
                  ),
                  Row(
                    children: [
                      SeriveceItem(
                          color: Color(0xfffdebe7),
                          img: 'images/home/Payments, Finance_bank-shine-icon-square.png',
                          title: 'Open Account'),
                      SizedBox(
                        width: scrW * 0.06,
                      ),
                      SeriveceItem(
                          color: Color(0xffe0f1f2),
                          title: 'Manage Cards',
                          img: 'images/home/Payments, Finance_credit-cards.png'),
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

  Expanded SeriveceItem(
      {required Color color, required String title, required String img}) {
    return Expanded(
      child: Container(
        height: scrW * 0.35,
        padding: EdgeInsets.symmetric(
            vertical: scrW * 0.02, horizontal: scrW * 0.02),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            // boxShadow: [
            //   BoxShadow(color: Colors.black),
            // ],
            color: Colors.white),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Container(
              width: scrW * 0.1,
              height: scrW * 0.1,
              padding: EdgeInsets.all(scrW * 0.02),
              margin: EdgeInsets.symmetric(horizontal: scrW * 0.015),
              decoration: BoxDecoration(
                  color: color, borderRadius: BorderRadius.circular(10)),
              child: Image.asset(
                img,
                fit: BoxFit.fill,
              ),
            ),
            SizedBox(
              width: scrW * 0.3,
              child: FittedBox(
                child: Text(
                  title,
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Column UsedItem(
      {required Color color,
        required String title,
        required String img,
        required String subtitle}) {
    return Column(
      children: [
        Container(
          width: scrW * 0.18,
          height: scrW * 0.18,
          padding: EdgeInsets.all(scrW * 0.04),
          margin: EdgeInsets.symmetric(horizontal: scrW * 0.015),
          decoration: BoxDecoration(
              color: color, borderRadius: BorderRadius.circular(20)),
          child: Image.asset(
            img,
            fit: BoxFit.fill,
          ),
        ),
        Text(title),
        Text(subtitle),
      ],
    );
  }

}


